﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="API_Test.aspx.cs" Inherits="API.API_Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>API_Test</title>
    <%--<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a").click(function (event) {
                $.ajax({
                    type: "POST",
                    url: "http://api.com:9562/API_Public.asmx/Racing_Word",
                    data: "{'strQuery':câu}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //alert(data.d);
                        var mydata = eval(data);
                        var table = CreateCustomersTable(mydata.d);
                        $(table).appendTo("#TableCont");
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Error Occured!" + " | " + XMLHttpRequest + " | " + textStatus + " | " + errorThrown
                    );
                    } 
                });
            });
        });

        function CreateCustomersTable(result) {
            var str = '<table border="1px solid blue">';
            str += '<tr><th>PK_lTopicID</th><th>sTitle</th><th>sLinkImage</th></tr>';
            for (var i = 0; i < result.length; i++) {
                str += '<tr><td>' + result[i].PK_lTopicID + '</td><td>' + result[i].sTitle + '</td><td><img style="width:100px;" src="' + result[i].sLinkImage + '" title="' + result[i].sTitle + '"/></td></tr>';
            }
            str += '</table>';
            return str;
        }
    </script>--%>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CreateCustomersTable(result) {
            var str = '<table class="table table-striped table-bordered table-hover dataTable no-footer styleGrid" border="1px solid blue" cellpadding="6" cellspacing="4">';
            str += '<tr><th>Hình ảnh</th><th>Đáp án</th></tr>';
            for (var i = 0; i < result.length; i++) {
                str += '<tr><td align="center"><img style="width:200px;" src="' + result[i].sLinkImage + '" title="' + result[i].sTitle + '"/></td><td>' + result[i].sTitle + '</td></tr>';
            }
            str += '</table>';
            var d = new Date();
            $('#lblMsg').html("<b>[ThangNM]</b> đã tìm thấy <b>" + result.length + "/501</b> kết quả phù hợp cho bạn (vào lúc <b>" + d.toISOString().replace('T', ' ').replace('Z', '') + "</b>).");
            $('#lblMsg').css("color", "Blue");
            return str;
        }
        function btnSearch_onclick() {
            $("#loadingmessage").show();
            $("#TableCont").children().remove();
            $('#lblMsg').html("");
            $.ajax({
                type: "POST",
                url: "http://api.com:9562/API_Public.asmx/Racing_Word",
                data: "{'strQuery':'" + txtKey.value + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var mydata = eval(data);
                    var table = CreateCustomersTable(mydata.d);
                    $(table).appendTo("#TableCont");
                    $("#loadingmessage").hide();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('#lblMsg').html("Error Occured!" + " | " + XMLHttpRequest + " | " + textStatus + " | " + errorThrown);
                    $('#lblMsg').css("color", "Red");
                    $("#loadingmessage").hide();
                }
            });
            txtKey.value = '';
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="input-group" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
                <input id="txtKey" type="search" class="form-control" autocomplete="off" placeholder="Nhập từ khóa vd: 'ao' hoặc link ảnh cần tìm vd: 'http://static.me.zing.vn/question/3.jpg'." autofocus />
                <span class="input-group-btn"><input id="btnSearch" type="button" value="Tìm kiếm" class="btn btn-info" onclick="return btnSearch_onclick()" /></span>
            </div><br /><br /><br />
            <label id="lblMsg" style="color:Red;"></label>
            <div id="loadingmessage" style="display: none">
                <img src="http://va1en.sftcdn.net/shared/img/interface/loader_bar.gif" alt="please wait" />
            </div>
            <div id="Div1" style="width: 100%;"></div><br /><br /><br />
        <a href="#">Check API</a>
        <table border="1px solid blue"></table>
        <div id="TableCont" style="width: 100%;"></div>
    </form>
</body>
</html>
